<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./code/base.css">
    <link rel="stylesheet" href="./code/xiami.css">
    <link rel="stylesheet" href="./code/YiRen.css">
</head>

<body>

    <div class="header container clearfix">
        <!-- 顶部导航栏 -->
        <div class="XM_logo fl">
            <img src="./img/XM_logo.png" alt="">
        </div>
        <div class="Hnav fl">
            <a href="" class="hnav1">发现</a>
            <a href="">我的音乐</a>
            <a href="">音乐人</a>
            <a href="">客户端下载</a>
            <a href="">会员中心</a>
        </div>

        <input type="text" placeholder="exo">
        <span class="icon_search"></span>
        <div class="login fl"> <a href="">登录/注册</a></div>
        <!-- 顶部导航栏 end-->
       

    </div>
  
    <div class="container">
           <!-- 居中盒子 -->
        <div class="C-center">
            <div class="Yiren">
                艺人
            </div>
            <div class="three-d clearfix">
                <div><a href=""><p>全部语种</p></span><span><img src="./img/箭头.png" alt=""></span></a></div>
                <div><a href=""><p>全部性别</p></span><span><img src="./img/箭头.png" alt=""></span></a></div>
                <div><a href=""><p>全部标签</p></span><span><img src="./img/箭头.png" alt=""></span></a></div>
            </div>
            <div class="singer clearfix">
                <div  class="radius-img"><div><img src="./img/singer2.jpg" alt=""></div><p>陈奕迅</p><a href="">#国语流行 &nbsp #粤语流行 &nbsp #华语流行</a></div>
                <div  class="radius-img"><div><img src="./img/singer2.jpg" alt=""></div><p>陈奕迅</p><a href="">#国语流行 &nbsp #粤语流行 &nbsp #华语流行</a></div>
                <div  class="radius-img"><div><img src="./img/singer2.jpg" alt=""></div><p>陈奕迅</p><a href="">#国语流行 &nbsp #粤语流行 &nbsp #华语流行</a></div>
                <div  class="radius-img"><div><img src="./img/singer2.jpg" alt=""></div><p>陈奕迅</p><a href="">#国语流行 &nbsp #粤语流行 &nbsp #华语流行</a></div>
                <div  class="radius-img"><div><img src="./img/singer2.jpg" alt=""></div><p>陈奕迅</p><a href="">#国语流行 &nbsp #粤语流行 &nbsp #华语流行</a></div>
                <div  class="radius-img clearmar"><div><img src="./img/singer2.jpg" alt=""></div><p>陈奕迅</p><a href="">#国语流行 &nbsp #粤语流行 &nbsp #华语流行</a></div>
                <div  class="radius-img"><div><img src="./img/singer2.jpg" alt=""></div><p>陈奕迅</p><a href="">#国语流行 &nbsp #粤语流行 &nbsp #华语流行</a></div>
                <div  class="radius-img"><div><img src="./img/singer2.jpg" alt=""></div><p>陈奕迅</p><a href="">#国语流行 &nbsp #粤语流行 &nbsp #华语流行</a></div>
                <div  class="radius-img"><div><img src="./img/singer2.jpg" alt=""></div><p>陈奕迅</p><a href="">#国语流行 &nbsp #粤语流行 &nbsp #华语流行</a></div>
                <div  class="radius-img"><div><img src="./img/singer2.jpg" alt=""></div><p>陈奕迅</p><a href="">#国语流行 &nbsp #粤语流行 &nbsp #华语流行</a></div>
                <div  class="radius-img"><div><img src="./img/singer2.jpg" alt=""></div><p>陈奕迅</p><a href="">#国语流行 &nbsp #粤语流行 &nbsp #华语流行</a></div>
                <div  class="radius-img clearmar"><div><img src="./img/singer2.jpg" alt=""></div><p>陈奕迅</p><a href="">#国语流行 &nbsp #粤语流行 &nbsp #华语流行</a></div>
                <div  class="radius-img"><div><img src="./img/singer2.jpg" alt=""></div><p>陈奕迅</p><a href="">#国语流行 &nbsp #粤语流行 &nbsp #华语流行</a></div>
                <div  class="radius-img"><div><img src="./img/singer2.jpg" alt=""></div><p>陈奕迅</p><a href="">#国语流行 &nbsp #粤语流行 &nbsp #华语流行</a></div>
                <div  class="radius-img"><div><img src="./img/singer2.jpg" alt=""></div><p>陈奕迅</p><a href="">#国语流行 &nbsp #粤语流行 &nbsp #华语流行</a></div>
                <div  class="radius-img"><div><img src="./img/singer2.jpg" alt=""></div><p>陈奕迅</p><a href="">#国语流行 &nbsp #粤语流行 &nbsp #华语流行</a></div>
                <div  class="radius-img"><div><img src="./img/singer2.jpg" alt=""></div><p>陈奕迅</p><a href="">#国语流行 &nbsp #粤语流行 &nbsp #华语流行</a></div>
                <div  class="radius-img clearmar"><div><img src="./img/singer2.jpg" alt=""></div><p>陈奕迅</p><a href="">#国语流行 &nbsp #粤语流行 &nbsp #华语流行</a></div>
                <div  class="radius-img"><div><img src="./img/singer2.jpg" alt=""></div><p>陈奕迅</p><a href="">#国语流行 &nbsp #粤语流行 &nbsp #华语流行</a></div>
                <div  class="radius-img"><div><img src="./img/singer2.jpg" alt=""></div><p>陈奕迅</p><a href="">#国语流行 &nbsp #粤语流行 &nbsp #华语流行</a></div>
                <div  class="radius-img"><div><img src="./img/singer2.jpg" alt=""></div><p>陈奕迅</p><a href="">#国语流行 &nbsp #粤语流行 &nbsp #华语流行</a></div>
                <div  class="radius-img"><div><img src="./img/singer2.jpg" alt=""></div><p>陈奕迅</p><a href="">#国语流行 &nbsp #粤语流行 &nbsp #华语流行</a></div>
                <div  class="radius-img"><div><img src="./img/singer2.jpg" alt=""></div><p>陈奕迅</p><a href="">#国语流行 &nbsp #粤语流行 &nbsp #华语流行</a></div>
                <div  class="radius-img clearmar"><div><img src="./img/singer2.jpg" alt=""></div><p>陈奕迅</p><a href="">#国语流行 &nbsp #粤语流行 &nbsp #华语流行</a></div>
                <div  class="radius-img"><div><img src="./img/singer2.jpg" alt=""></div><p>陈奕迅</p><a href="">#国语流行 &nbsp #粤语流行 &nbsp #华语流行</a></div>
                <div  class="radius-img"><div><img src="./img/singer2.jpg" alt=""></div><p>陈奕迅</p><a href="">#国语流行 &nbsp #粤语流行 &nbsp #华语流行</a></div>
                <div  class="radius-img"><div><img src="./img/singer2.jpg" alt=""></div><p>陈奕迅</p><a href="">#国语流行 &nbsp #粤语流行 &nbsp #华语流行</a></div>
                <div  class="radius-img"><div><img src="./img/singer2.jpg" alt=""></div><p>陈奕迅</p><a href="">#国语流行 &nbsp #粤语流行 &nbsp #华语流行</a></div>
                <div  class="radius-img"><div><img src="./img/singer2.jpg" alt=""></div><p>陈奕迅</p><a href="">#国语流行 &nbsp #粤语流行 &nbsp #华语流行</a></div>
                <div  class="radius-img clearmar"><div><img src="./img/singer2.jpg" alt=""></div><p>陈奕迅</p><a href="">#国语流行 &nbsp #粤语流行 &nbsp #华语流行</a></div>
                <div  class="radius-img"><div><img src="./img/singer2.jpg" alt=""></div><p>陈奕迅</p><a href="">#国语流行 &nbsp #粤语流行 &nbsp #华语流行</a></div>
                <div  class="radius-img"><div><img src="./img/singer2.jpg" alt=""></div><p>陈奕迅</p><a href="">#国语流行 &nbsp #粤语流行 &nbsp #华语流行</a></div>
                <div  class="radius-img"><div><img src="./img/singer2.jpg" alt=""></div><p>陈奕迅</p><a href="">#国语流行 &nbsp #粤语流行 &nbsp #华语流行</a></div>
                <div  class="radius-img"><div><img src="./img/singer2.jpg" alt=""></div><p>陈奕迅</p><a href="">#国语流行 &nbsp #粤语流行 &nbsp #华语流行</a></div>
                <div  class="radius-img"><div><img src="./img/singer2.jpg" alt=""></div><p>陈奕迅</p><a href="">#国语流行 &nbsp #粤语流行 &nbsp #华语流行</a></div>
                <div  class="radius-img clearmar"><div><img src="./img/singer2.jpg" alt=""></div><p>陈奕迅</p><a href="">#国语流行 &nbsp #粤语流行 &nbsp #华语流行</a></div>
               
            </div>
        </div>
    </div>

    <div class="footer clearfix">
        <div class="Big-info clearfix fl">
            <div class="info">
                <div class="info-left fl">
                    <span>关于虾米</span>
                    <span>入驻虾米</span>
                    <span>资料补全</span>
                    <span>桌面端</span>
                    <span>合作伙伴</span>
                </div>
                <div class="info-right fl ">
                    <div class="clearfix"><a href="">关于我们</a><a href="">虾米招聘</a><a href="">联系我们</a><a
                            href="">隐私权政策</a><a href="">联系客服</a><a href="">意见反馈</a><a href="">回旧版</a></div>
                    <div class="clearfix"><a href="">音乐人</a><a href="">音乐专栏</a></div>
                    <div class="clearfix"><a href="">添加资料</a><a href="">大家想要的专辑</a><a href="">音频上传</a><a
                            href="">MV上传</a></div>
                    <div class="clearfix"><a href="">pc电脑</a><a href="">苹果电脑</a></div>
                    <div class="clearfix small-pic">
                        <div><img src="./img/AI2.jpg" alt=""></div>
                        <div><img src="./img/XD2.jpg" alt=""></div>
                        <div><img src="./img/AI1.jpg" alt=""></div>
                        <div><img src="./img/AI4.jpg" alt=""></div>
                        <div><img src="./img/AI2.jpg" alt=""></div>
                        <div><img src="./img/party1.jpg" alt=""></div>
                        <div><img src="./img/AI5.jpg" alt=""></div>
                        <div><img src="./img/party3.jpg" alt=""></div>
                        <div><img src="./img/party4.jpg" alt=""></div>
                        <div><img src="./img/party5.jpg" alt=""></div>
                        <div><img src="./img/party4.jpg" alt=""></div>
                        <div><img src="./img/AI1.jpg" alt=""></div>
                        <div><img src="./img/AI2.jpg" alt=""></div>
                        <div><img src="./img/AI1.jpg" alt=""></div>
                        <div><img src="./img/AI3.jpg" alt=""></div>
                        <div><img src="./img/AI1.jpg" alt=""></div>
                        <div><img src="./img/AI2.jpg" alt=""></div>
                        <div><img src="./img/AI1.jpg" alt=""></div>
                        <div><img src="./img/AI2.jpg" alt=""></div>
                        <div><img src="./img/AI1.jpg" alt=""></div>
                    </div>
                </div>
            </div>
            
        </div>
        <div class="focus-us fl">
            <div>关注我们</div>
            <div>
                <span><img src="./img/weibo.png" alt=""></span>
                <span><img src="./img/weixin.png" alt=""></span>
                <span><img src="./img/zhihu.png" alt=""></span>
            </div>
        </div>
        <div class="Erweima fr">
            <p>虾米音乐APP</p>
            <div><img src="./img/Eweima.png" alt=""></div>
        </div>
      <div class="line"></div>
      <!-- footer 最下面 -->
      <ul>
          <li><a href="">淘宝网</a></li>
          <li>|</li>
          <li><a href="">天猫</a></li>
          <li>|</li>
          <li><a href="">支付宝</a></li>
          <li>|</li>
          <li><a href="">飞猪</a></li>
          <li>|</li>
          <li><a href="">聚划算</a></li>
          <li>|</li>
          <li><a href="">阿里云</a></li>
          <li>|</li>
          <li><a href="">阿里妈妈</a></li>
          <li>|</li>
          <li><a href="">1688</a></li>
          <li>|</li>
          <li><a href="">AliOS</a></li>
          <li>|</li>
          <li><a href="">阿里通信</a></li>
          <li>|</li>
          <li><a href="">万网</a></li>
          <li>|</li>
          <li><a href="">阿里游戏</a></li>
          <li>|</li>
          <li><a href="">大麦网</a></li>
          <li>|</li>
          <li><a href="">一淘</a></li>
          <li>|</li>
          <li><a href="">狂野飙车9</a></li>
          <li>|</li>
          <li><a href="">UCCricket</a></li>
          <li>|</li>
          <li><a href="">阿里安全</a></li>
          

      </ul>
      <div class="subfont">
       <p> © 2007 - 2020 杭州阿里巴巴音乐科技有限公司 版权所有 阿里巴巴旗下公司</p>
       <ul class="subul clearfix">
           <li><a href="">营业执照</a></li>
           <li>|</li>
           <li><a href="">网络文化经营许可证 :浙网文(2019)4999-453号</a></li>
           <li>|</li>
           <li><a href="">增值电信业务经营许可证 :浙B2-20110188 </a></li>
           <li>|</li>
           <li><a href="">浙ICP备18050417号-2</a></li>
           <li>|</li>
           <li><a href="">浙公网安备 33011002012729号</a></li>
       </ul>
      </div>
    </div>



</body>

</html>